<template>
    <div id="id-recognition">
        <div id="tips">
            为了保障用户个人信息安全，在使用业主委托等业务前，请先进行<span>实名身份认证</span>。
        </div>
        <div id="IDcontainer">
            <p>上传身份证</p>
            <div>
                <div>
                    <img id='image' :src="imgSrc.ready" alt="图片截取"/>
                    <button @click="getImg">确认</button>
                </div>
                <p>身份证人像面:</p>
                <img :src="imgSrc.front" />
                <input type="file" @change="front($event)" alt="身份证正面">
                <p>身份证国徽面:</p>
                <img :src="imgSrc.back" />
                <input type="file" @change="back($event)" alt="身份证反面">
            </div>
            <p>填写个人信息</p>
            <div id="ID-submit">
                <span>姓名:<input type="text" placeholder="请输入你的姓名" v-model="IDData.username"></span>
                <span>身份证号码:<input type="text" maxlength="18" placeholder="请输入身份证号码" v-model="IDData.cert_no"></span>
                <p>
                    <button @click="submitForm">提交</button>
                    <button @click="$router.push('/rent')">返回</button>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
    import Cropper from 'cropperjs';

    export default {
        name: "id-recognition",
        data(){
            return{
                imgSrc:{ready:require('../assets/img/身份证人像.jpg'),front:require('../assets/img/身份证人像.jpg'),back:require('../assets/img/身份证国徽.jpg')},
                cropper:'',
                imgState:'' ,
                imgSuccess:{
                    front:0,
                    back:0
                },
                IDData:{
                    username:'',
                    cert_no:''
                }
            }
        },
        computed:{
            token(){
                let reg=/(^| )login_token=([^;]*)(;|$)/;
                let tokenReady = document.cookie.match(reg);
                return tokenReady[2];
            }
        },
        methods:{
            /*获取身份证人像面准备裁剪*/
            front(e){
                this.imgState = 0;
                this.imgSrc.ready = window.URL.createObjectURL(e.target.files[0]);
                if(!this.cropper)return;
                this.cropper.replace(this.imgSrc.ready);
            },
            /*获取身份证国徽面准备裁剪*/
            back(e){
                this.imgState = 1;
                this.imgSrc.ready = window.URL.createObjectURL(e.target.files[0]);
                if(!this.cropper)return;
                this.cropper.replace(this.imgSrc.ready);
            },
            /*上传身份证照片*/
            getImg(){
                this.cropper.getCroppedCanvas({
                    width: 160,
                    height: 90,
                    minWidth: 256,
                    minHeight: 256,
                    maxWidth: 4096,
                    maxHeight: 4096,
                    fillColor: '#fff',
                    imageSmoothingEnabled: false,
                    imageSmoothingQuality: 'high',
                });
                let formData = new FormData();
                formData.append('token', this.token);
                if(this.imgState === 1){
                    let base64 = this.cropper.getCroppedCanvas().toDataURL();
                    this.imgSrc.back = base64;
                    formData.append('cert_last', base64);
                }else if(this.imgState === 0){
                    let base64 = this.cropper.getCroppedCanvas().toDataURL();
                    this.imgSrc.front = base64;
                    formData.append('cert_first', base64);
                }
                else{
                    alert("请先选择照片");
                }
                this.$axios.post(this.Global.api+'/index.php/index/uploadVerifyData',formData,{headers:{'Content-Type':'application/x-www-form-urlencoded'}})
                    .then(res=>{
                        if(res.status>=200&&res.status<300){
                            if(this.imgState === 1){
                                this.imgSuccess.back=1;
                            }else if(this.imgState === 0){
                                this.imgSuccess.front=1;
                            }
                        }
                    })
            },
            /*提交身份证和姓名到后台*/
            submitForm(){
                let reg=/^[0-9]{17}([0-9]|X|x)/;
                if(!this.imgSuccess.front&&!this.imgSuccess.back){
                    alert('请先完成身份照片验证');
                    return;
                }
                if(!this.IDData.username){
                    alert('名字不能为空，请输入');
                    return;
                }
                if(!reg.test(this.IDData.cert_no)){
                    alert('身份证号码输入错误，请重新输入');
                    return;
                }
                this.IDData.token=this.token;
                this.$axios.post(this.Global.api+'/index.php/index/uploadVerifyData',this.$qs.stringify(this.IDData),{headers:{'Content-Type':'application/x-www-form-urlencoded'}})
                    .then(res=>{
                        if(res.status>=200&&res.status<300&&res.data.res===0){
                            alert('上传成功');
                            this.$router.go(-1);
                        }
                    })
            }
        },
        mounted(){
            /*建立cropper插件*/
            let image = document.getElementById('image');
            this.cropper = new Cropper(image, {
                aspectRatio: 16 / 9,
            });
        },
        created(){
            /*写入cropper插件的css*/
            let cropperCss= document.createElement('link');
            cropperCss.setAttribute('rel','stylesheet');
            cropperCss.setAttribute('type','text/css');
            cropperCss.setAttribute('href','https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.3/cropper.min.css');
            document.head.appendChild(cropperCss);
        }
    }
</script>

<style scoped>
    #id-recognition{
        width: 70%;
        min-width: 960px;
        margin: 10px auto;
        background-color: white;
        box-shadow: 2px 2px 2px rgba(0,0,0,0.14);
    }
    #tips{
        width: 80%;
        padding: 10px;
        margin: 0 auto;
        border-bottom: 2px solid #ff0a60;
        text-align: center;
        font-size: 1.5em;
        user-select: none;
    }
    #tips span{
        color: #ff0a60;
    }
    #IDcontainer{
        width: 85%;
        margin: 10px auto;
    }
    #IDcontainer>p{
        clear: both;
        font-size: 1.3em;
        color: #ff0a60;
    }
    #IDcontainer>div:nth-child(2){
        height: 460px;
        margin-top: 10px;
    }
    #IDcontainer>div>div{
        float: left;
        position: relative;
        margin-left: 5px;
        width: 65%;
        height: 450px;
        border: 1px solid #c7c7c7;
        /*overflow: hidden;*/
    }
    #IDcontainer>div>div>img{
        width: 100%;
        height: 100%;
    }
    #IDcontainer>div>div>button{
        position: absolute;
        bottom: 0;
        right: 0;
        margin: 10px;
        padding: 5px 10px;
        border: 1px solid gray;
        background-color: #ff0a60;
        box-shadow: 2px 2px 2px rgba(0,0,0,0.14);
        color: white;
        font-size: 1.2em;
        letter-spacing: 1em;
        text-indent: 1em;
        cursor: pointer;
    }
    #IDcontainer>div>div>button:hover{
        background-color: rgba(255, 10, 96, 0.9);
    }
    #IDcontainer div img:nth-child(6),#container img:nth-child(3){
        width: 237px;
        height: 150px;
        margin-left: 10px;
        border: 1px solid #c7c7c7;
    }
    #IDcontainer div p{
        text-indent: 10px;
        font-size: 1.2em;
    }
    #IDcontainer div input{
        margin-left: 10px;
        margin-bottom: 20px;
    }
    #ID-submit{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 30px;
    }
    #ID-submit span{
        font-size: 1.2em;
        color: #ff0a60;
    }
    #ID-submit span:nth-child(1){
        text-indent: 3em;
    }
    #ID-submit span input{
        border-radius: 5px;
        border: 1px solid rgba(128, 128, 128, 0.13);
        font-size: 14px;
        line-height: 30px;
        height: 30px;
        width: 13em;
        text-indent: 0.5em;
    }
    #ID-submit span input:focus{
        border-color: #ff0a60;
    }
    #ID-submit button{
        margin-left: 20px;
        padding: 5px 15px;
        border: none;
        background-color: #ff0a60;
        box-shadow: 2px 2px 2px rgba(0,0,0,0.14);
        color: white;
        font-size: 1.2em;
        letter-spacing: 0.5em;
        text-indent: 0.5em;
        cursor: pointer;
    }
    #ID-submit button:hover{
        background-color: rgba(255, 10, 96, 0.7);
    }
</style>